<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS引入方式</title>
    <!--
        错误案例
            如果当前script标签是用于引入外部的js文件的话
            则当前script标签的标签体中不能编写任何js代码
    -->
    <!--<script type="text/javascript" src="test.js">-->
        <!--function f1(){-->
            <!--console.log("Hello JavaScript");-->
        <!--}-->
    <!--</script>-->
    <script type="text/javascript" src="test.js"></script>
    <script>
        // js语法格式
        // function 方法名(参数列表){方法处理}
        function f1(){
            console.log("Hello JavaScript");
        }
    </script>
</head>
<body>
<!--
    想要为某一个元素绑定一个js
    必须通过对应的事件属性来实现onxxx
    语法:事件属性="事件的具体操作"
    具体操作中,可以直接通过javascript:具体代码来实现
    其中javascript:可以省略
    也可以通过调用方法的方式,属性值是一个方法名()
    onclick="test()"
-->
<!--
    简单缩写方式
    在JS中,如果双引号中需要引号,则使用单引号表示
    语法:事件属性="javascript:具体代码"
    其中javascript:可以省略
-->
<input type="button" id="aa" value="简短缩写方式" onclick="javascript:alert('Hello JavaScript')"><br>
<input type="button" value="简短缩写方式" onclick="alert('Hello JavaScript')"><br>
<!--
    内联方式
    可以在当前HTML的任意位置定义一个script标签
    在script标签体中编写js代码
-->
<button type="button" onclick="f1()">内联方式</button>
<br>
<!--
    外部引入
        1.创建一个*.js的文件
            该文件中编写js代码
        2.在当前HTML文档的head标签中使用script标签引入外部文件
-->
<button onclick="sayHello()">外部引入</button>
</body>

</html>
